<template>
  <div class="contest-registration">
    <Header />
    
    <div class="banner">
      <div class="banner-content">
        <h1>摄影大赛报名</h1>
        <p>欢迎参加我们的摄影大赛，展示您的摄影才华</p>
      </div>
    </div>
    
    <div class="container">
      <el-card class="registration-card">
        <div slot="header" class="clearfix">
          <span>参赛报名</span>
        </div>
        
        <div class="contest-intro">
          <h3>参赛须知</h3>
          <p>1. 参赛者需要提供真实个人信息，我们将对您的信息严格保密。</p>
          <p>2. 参赛作品必须为原创，严禁抄袭、剽窃他人作品。</p>
          <p>3. 参赛作品将由专业评委进行评审，评审结果将在平台公布。</p>
          <p>4. 获奖作品将有机会参加线下展览并获得丰厚奖品。</p>
          <p>5. 审核通过后，您可以在个人中心中上传参赛作品。</p>
        </div>
        
        <el-divider content-position="center">填写报名信息</el-divider>
        
        <el-form
          ref="contestForm"
          :model="formData"
          :rules="rules"
          label-width="100px"
          class="contest-form">
          <el-form-item label="真实姓名" prop="realName">
            <el-input v-model="formData.realName" placeholder="请输入真实姓名"></el-input>
          </el-form-item>
          
          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="formData.idCard" placeholder="请输入18位身份证号"></el-input>
          </el-form-item>
          
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="formData.phone" placeholder="请输入手机号码"></el-input>
          </el-form-item>
          
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="formData.email" placeholder="请输入电子邮箱"></el-input>
          </el-form-item>
          
          <el-form-item label="联系地址" prop="address">
            <el-input v-model="formData.address" placeholder="请输入详细联系地址"></el-input>
          </el-form-item>
          
          <el-form-item label="参赛类型" prop="contestType">
            <el-radio-group v-model="formData.contestType">
              <el-radio :label="1">手机摄影</el-radio>
              <el-radio :label="2">相机摄影</el-radio>
              <el-radio :label="3">两者都参加</el-radio>
            </el-radio-group>
          </el-form-item>
          
          <el-form-item label="作品集标题" prop="workTitle">
            <el-input v-model="formData.workTitle" placeholder="请输入您的作品集标题"></el-input>
          </el-form-item>
          
          <el-form-item label="作品集描述" prop="workDescription">
            <el-input
              type="textarea"
              :rows="4"
              v-model="formData.workDescription"
              placeholder="请简要描述您的参赛作品集">
            </el-input>
          </el-form-item>
          
          <el-form-item>
            <el-checkbox v-model="agreement">我已阅读并同意比赛规则和隐私条款</el-checkbox>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="submitForm" :loading="submitting" :disabled="!agreement">
              提交报名
            </el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
        
        <!-- 成功提示 -->
        <el-dialog
          title="报名成功"
          :visible.sync="successDialogVisible"
          width="400px"
          :show-close="false"
          :close-on-click-modal="false">
          <div class="success-content">
            <i class="el-icon-success success-icon"></i>
            <h3>恭喜您，报名成功！</h3>
            <p>您的参赛信息已提交，请记住您的报名编号：</p>
            <div class="registration-number">{{ registrationNumber }}</div>
            <p>请妥善保管此编号，您可以凭借此编号查询报名状态</p>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="goToHome">返回首页</el-button>
            <el-button type="primary" @click="goToUploadPhoto">去上传作品</el-button>
          </span>
        </el-dialog>
      </el-card>
    </div>
    
    <footer class="footer">
      <div class="footer-content">
        <p>© 2023 PhotoPro - 摄影作品管理与展示平台</p>
      </div>
    </footer>
  </div>
</template>

<script>
import Header from '@/components/Header.vue'

export default {
  name: 'ContestRegistration',
  components: {
    Header
  },
  data() {
    // 身份证号验证
    const validateIdCard = (rule, value, callback) => {
      const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      if (!reg.test(value)) {
        return callback(new Error('请输入正确的身份证号码'))
      }
      callback()
    }
    
    // 手机号验证
    const validatePhone = (rule, value, callback) => {
      const reg = /^1[3-9]\d{9}$/
      if (!reg.test(value)) {
        return callback(new Error('请输入正确的手机号码'))
      }
      callback()
    }
    
    return {
      submitting: false,
      agreement: false,
      successDialogVisible: false,
      registrationNumber: '',
      formData: {
        realName: '',
        idCard: '',
        phone: '',
        email: '',
        address: '',
        contestType: 1,
        workTitle: '',
        workDescription: ''
      },
      rules: {
        realName: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        idCard: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { validator: validateIdCard, trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入电子邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入联系地址', trigger: 'blur' },
          { max: 200, message: '地址不能超过200个字符', trigger: 'blur' }
        ],
        contestType: [
          { required: true, message: '请选择参赛类型', trigger: 'change' }
        ],
        workTitle: [
          { required: true, message: '请输入作品集标题', trigger: 'blur' },
          { max: 50, message: '标题不能超过50个字符', trigger: 'blur' }
        ],
        workDescription: [
          { max: 500, message: '描述不能超过500个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.contestForm.validate(async (valid) => {
        if (valid) {
          if (!this.agreement) {
            this.$message.warning('请阅读并同意比赛规则和隐私条款')
            return
          }
          
          this.submitting = true
          try {
            // 发送请求到后端API
            const res = await this.$http.post('/contestants/register', this.formData)
            if (res.data.code === 1) {
              this.registrationNumber = res.data.data.registrationNumber || this.generateRegistrationNumber()
              this.successDialogVisible = true
              this.resetForm()
            } else {
              this.$message.error(res.data.msg || '报名失败，请稍后重试')
            }
          } catch (error) {
            console.error('报名提交失败', error)
            this.$message.error('报名提交失败，请稍后重试')
          } finally {
            this.submitting = false
          }
        } else {
          return false
        }
      })
    },
    resetForm() {
      this.$refs.contestForm.resetFields()
      this.agreement = false
    },
    goToHome() {
      this.successDialogVisible = false
      this.$router.push('/')
    },
    goToUploadPhoto() {
      this.successDialogVisible = false
      this.$router.push({
        path: '/upload',
        query: { registrationNumber: this.registrationNumber }
      })
    },
    generateRegistrationNumber() {
      // 生成随机报名编号 (格式: CP + 年月日 + 4位随机数)
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      const day = String(now.getDate()).padStart(2, '0')
      const random = Math.floor(1000 + Math.random() * 9000)
      return `CP${year}${month}${day}${random}`
    }
  }
}
</script>

<style scoped>
.contest-registration {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.banner {
  background: linear-gradient(rgba(52, 73, 94, 0.8), rgba(52, 73, 94, 0.8)), url('https://img.zcool.cn/community/0164895e3e61a2a801216518b3f5fe.jpg') no-repeat center center;
  background-size: cover;
  color: white;
  padding: 80px 0;
  text-align: center;
}

.banner-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.banner h1 {
  font-size: 36px;
  margin-bottom: 20px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.banner p {
  font-size: 18px;
  margin-bottom: 30px;
  opacity: 0.9;
}

.container {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
  flex: 1;
}

.registration-card {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.contest-intro {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.contest-intro h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 15px;
}

.contest-intro p {
  margin: 8px 0;
  color: #666;
}

.contest-form {
  margin-top: 20px;
}

.footer {
  background-color: #34495e;
  color: white;
  padding: 20px 0;
  margin-top: 40px;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.success-content {
  text-align: center;
  padding: 20px 0;
}

.success-icon {
  font-size: 60px;
  color: #67C23A;
  margin-bottom: 20px;
}

.registration-number {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  margin: 15px 0;
  padding: 10px;
  background-color: #ecf5ff;
  border-radius: 4px;
  display: inline-block;
}

@media (max-width: 768px) {
  .banner {
    padding: 50px 0;
  }
  
  .banner h1 {
    font-size: 28px;
  }
  
  .banner p {
    font-size: 16px;
  }
}
</style> 